<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        
        <h1>{{count}}</h1>



        <!--直接写表达式 -->
        <button v-on:click="count++">+1</button>
        <!-- 绑定函数 -->
        <button @click="minus">-1</button>

        <div v-if="count>20" style="color: red;">已经大于20了</div>
        <div v-else-if="count===5" style="color: rgb(128, 124, 0);">是5</div>
        <div v-else-if="count===15" style="color: rgb(70, 128, 0);">是15</div>
        <div v-else style="color: green;">小于20</div>
        
        <div v-show="count<0" style="color: rgb(55, 0, 255);">小于0了</div>
        

    </div>

</body>

<script>

    const {createApp} = Vue;
    createApp(
        {
            data(){
                return{
                    count:10,
                    msg:"/search/1",
                    user:{
                        name:"wwh"
                    }
                }
            },

            methods: {
                minus(){
                    this.count--;
                },
                alertTest(){
                    alert("test")
                }
            }
        }
    ).mount("#app")
</script>
